<template>
  <div class="register-container">
    <div class="register-content">
      <!-- 左侧装饰区域 -->
      <div class="register-decoration">
        <div class="decoration-content">
          <h1 class="decoration-title">加入非遗传承</h1>
          <p class="decoration-subtitle">让我们一起守护传统文化瑰宝</p>
          <div class="decoration-features">
            <div class="feature-item">
              <el-icon class="feature-icon"><User /></el-icon>
              <div class="feature-text">
                <h3>加入社区</h3>
                <p>与志同道合的伙伴交流</p>
              </div>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Collection /></el-icon>
              <div class="feature-text">
                <h3>收藏作品</h3>
                <p>收藏喜爱的非遗作品</p>
              </div>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Star /></el-icon>
              <div class="feature-text">
                <h3>参与活动</h3>
                <p>参与线上线下活动</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧注册表单 -->
      <div class="register-form-wrapper">
        <div class="register-form-content">
          <div class="form-header">
            <h2>创建账号</h2>
            <p class="text-gray-500">已有账号？<el-button link type="primary" @click="handleLogin">立即登录</el-button></p>
          </div>

          <el-form 
            :model="registerForm" 
            :rules="rules" 
            ref="registerFormRef" 
            @submit.prevent="handleRegister"
            class="register-form"
          >
            <el-form-item prop="username">
              <el-input 
                v-model="registerForm.username" 
                placeholder="请输入用户名"
                :prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <el-form-item prop="email">
              <el-input 
                v-model="registerForm.email" 
                placeholder="请输入邮箱"
                :prefix-icon="Message"
                size="large"
              />
            </el-form-item>

            <el-form-item prop="phone">
              <el-input 
                v-model="registerForm.phone" 
                placeholder="请输入手机号"
                :prefix-icon="Phone"
                size="large"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                placeholder="请输入密码"
                :prefix-icon="Lock"
                show-password
                size="large"
              />
            </el-form-item>

            <el-form-item prop="confirmPassword">
              <el-input 
                v-model="registerForm.confirmPassword" 
                type="password" 
                placeholder="请确认密码"
                :prefix-icon="Lock"
                show-password
                size="large"
              />
            </el-form-item>

            <el-form-item prop="agreement">
              <el-checkbox v-model="registerForm.agreement">
                我已阅读并同意
                <el-button link type="primary" @click="showAgreement">《用户协议》</el-button>
                和
                <el-button link type="primary" @click="showPrivacy">《隐私政策》</el-button>
              </el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button 
                type="primary" 
                native-type="submit" 
                class="submit-button"
                :loading="loading"
                size="large"
              >
                {{ loading ? '注册中...' : '立即注册' }}
              </el-button>
            </el-form-item>

            <div class="other-register">
              <div class="divider">
                <span>其他注册方式</span>
              </div>
              <div class="social-register">
                <el-button circle>
                  <el-icon><Wechat /></el-icon>
                </el-button>
                <el-button circle>
                  <el-icon><Phone /></el-icon>
                </el-button>
                <el-button circle>
                  <el-icon><Message /></el-icon>
                </el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 用户协议弹窗 -->
    <el-dialog
      v-model="agreementVisible"
      title="用户协议"
      width="60%"
      class="agreement-dialog"
    >
      <div class="agreement-content">
        <h3>一、总则</h3>
        <p>1.1 本协议是您与非遗传承平台之间关于使用本平台服务所订立的协议。</p>
        <p>1.2 您在使用本平台提供的各项服务时，应当同意本协议的全部条款。</p>
        
        <h3>二、服务内容</h3>
        <p>2.1 本平台的具体服务内容由平台根据实际情况提供。</p>
        <p>2.2 平台保留随时修改或中断服务的权利。</p>
        
        <h3>三、用户账号</h3>
        <p>3.1 用户注册时应当提供真实、准确的个人资料。</p>
        <p>3.2 用户应当妥善保管账号和密码，对账号下的所有行为负责。</p>
      </div>
    </el-dialog>

    <!-- 隐私政策弹窗 -->
    <el-dialog
      v-model="privacyVisible"
      title="隐私政策"
      width="60%"
      class="privacy-dialog"
    >
      <div class="privacy-content">
        <h3>一、信息收集</h3>
        <p>1.1 我们收集的信息包括但不限于：</p>
        <ul>
          <li>您提供的注册信息</li>
          <li>您使用服务时产生的数据</li>
          <li>设备信息和日志信息</li>
        </ul>
        
        <h3>二、信息使用</h3>
        <p>2.1 我们使用收集的信息用于：</p>
        <ul>
          <li>提供、维护和改进服务</li>
          <li>开发新的服务和功能</li>
          <li>保护用户和平台的安全</li>
        </ul>
        
        <h3>三、信息保护</h3>
        <p>3.1 我们采取各种安全措施保护您的个人信息。</p>
        <p>3.2 我们不会向第三方出售您的个人信息。</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../stores/authStore'
import { 
  User, 
  Message, 
  Phone, 
  Lock, 
  Wechat,
  Collection,
  Star
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()
const registerFormRef = ref(null)
const loading = ref(false)
const agreementVisible = ref(false)
const privacyVisible = ref(false)

const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  agreement: false
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6-20个字符之间', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  agreement: [
    { 
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请阅读并同意用户协议和隐私政策'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

const handleRegister = async () => {
  try {
    await registerFormRef.value.validate()
    loading.value = true
    await authStore.register(registerForm)
    ElMessage.success('注册成功，请登录')
    router.push('/login')
  } catch (err) {
    ElMessage.error(err.message || '注册失败')
  } finally {
    loading.value = false
  }
}

const handleLogin = () => {
  router.push('/login')
}

const showAgreement = () => {
  agreementVisible.value = true
}

const showPrivacy = () => {
  privacyVisible.value = true
}
</script>

<style scoped>
.register-container {
  @apply min-h-screen bg-gray-50;
}

.register-content {
  @apply flex min-h-screen;
}

/* 左侧装饰区域 */
.register-decoration {
  @apply hidden lg:flex lg:w-1/2 bg-primary-600 relative overflow-hidden;
}

.decoration-content {
  @apply relative z-10 flex flex-col justify-center items-center text-white p-12;
}

.decoration-title {
  @apply text-4xl font-bold mb-4 text-center;
}

.decoration-subtitle {
  @apply text-xl text-white/80 mb-12 text-center;
}

.decoration-features {
  @apply space-y-8 max-w-lg;
}

.feature-item {
  @apply flex items-center gap-4;
}

.feature-icon {
  @apply text-3xl;
}

.feature-text h3 {
  @apply text-lg font-semibold mb-1;
}

.feature-text p {
  @apply text-white/80;
}

/* 右侧注册表单 */
.register-form-wrapper {
  @apply flex-1 flex items-center justify-center p-8;
}

.register-form-content {
  @apply w-full max-w-md;
}

.form-header {
  @apply text-center mb-8;
}

.form-header h2 {
  @apply text-3xl font-bold text-gray-800 mb-2;
}

.register-form {
  @apply space-y-6;
}

.submit-button {
  @apply w-full;
}

.other-register {
  @apply mt-8;
}

.divider {
  @apply relative text-center my-6;
}

.divider::before,
.divider::after {
  content: '';
  @apply absolute top-1/2 w-1/3 h-px bg-gray-200;
}

.divider::before {
  @apply left-0;
}

.divider::after {
  @apply right-0;
}

.divider span {
  @apply px-4 text-gray-500 bg-white relative;
}

.social-register {
  @apply flex justify-center gap-4 mt-4;
}

/* 弹窗样式 */
.agreement-content,
.privacy-content {
  @apply space-y-6;
}

.agreement-content h3,
.privacy-content h3 {
  @apply text-lg font-semibold text-gray-800 mb-2;
}

.agreement-content p,
.privacy-content p {
  @apply text-gray-600 mb-4;
}

.agreement-content ul,
.privacy-content ul {
  @apply list-disc list-inside text-gray-600 space-y-2;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .register-decoration {
    @apply hidden;
  }
  
  .register-form-wrapper {
    @apply w-full;
  }
}

/* 动画效果 */
.register-form-content {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-input__wrapper) {
  @apply shadow-none border border-gray-200;
}

:deep(.el-input__wrapper:hover) {
  @apply border-primary-500;
}

:deep(.el-input__wrapper.is-focus) {
  @apply border-primary-500 shadow-none;
}

:deep(.el-button--primary) {
  @apply bg-primary-500 hover:bg-primary-600;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  @apply bg-primary-500 border-primary-500;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  @apply text-primary-500;
}
</style> 